<template>
	<view class="">
		<view class="cu-modal" :class="modalName=='Modal'?'show':''">
			<view class="cu-dialog" style="border-radius: 30rpx;">
				<view class="cu-bar bg-white justify-end">
					<view class="content">提示</view>
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding-xl bg-white" style="display: flex;align-items: center;flex-direction: column;">
					<view class="" style="margin-bottom: 30rpx;color: #000;font-size: 34rpx;">
						
						{{title}}
					</view>
					<view class="" v-if="advertisingOpen && modalName == 'Modal'" style="">
						<ad :unit-id="adUnitIdbanner"></ad>
					</view>
					<template v-if="authorize">
						<!-- #ifdef MP-WEIXIN  || MP-QQ || MP-TOUTIAO -->
						<!-- <button  style="border: none; margin-top: 30rpx; color: #000; border-radius: 50rpx;display: flex;align-items: center;justify-content: center; background: #ffe657; width: 350rpx;height: 80rpx;" @click="getUserInfo" class="accredit-button" size="mini">
							{{btnText}}
						</button> -->
						<!-- #endif -->
						<!-- #ifdef APP-PLUS -->
						<!-- <button style="border: none; margin-top: 30rpx; color: #000; border-radius: 50rpx;display: flex;align-items: center;justify-content: center; background: #ffe657; width: 350rpx;height: 80rpx;" @click="toLogin" class="accredit-button" size="mini">
							{{btnText}}
						</button> -->
						<!-- #endif -->
						<!-- #ifdef H5 -->
						<!-- <button style="border: none; margin-top: 30rpx; color: #000; border-radius: 50rpx;display: flex;align-items: center;justify-content: center; background: #ffe657; width: 350rpx;height: 80rpx;" @click="toLogin" class="accredit-button" size="mini">
							{{btnText}}
						</button> -->
						<!-- #endif -->
						<button style="border: none; margin-top: 30rpx; color: #000; border-radius: 50rpx;display: flex;align-items: center;justify-content: center; background: #ffe657; width: 350rpx;height: 80rpx;" @click="toLogin" class="accredit-button" size="mini">
							{{btnText}}
						</button>
						<!-- <view></view> -->
					</template>
					<template v-else>
						<button open-type="share" style="border: none; margin-top: 30rpx; color: #000; border-radius: 50rpx;display: flex;align-items: center;justify-content: center; background: #ffe657; width: 350rpx;height: 80rpx;" class="accredit-button">{{btnText}}</button>
						<button @tap="kanguangao"  v-if="vipConfig.advertisingOpen == 1" style="border: none; margin-top: 30rpx; color: #000; border-radius: 50rpx;display: flex;align-items: center;justify-content: center; background: #ffe657; width: 350rpx;height: 80rpx;" class="accredit-button">清爽一天</button>
					</template>
					<!-- <view class=""  style="margin-top: 30rpx; color: #000; border-radius: 50rpx;display: flex;align-items: center;justify-content: center; background: #ffe657; width: 350rpx;height: 80rpx;">
						{{btnText}}
					</view> -->
					<view class="" style="color: #ccc;margin-top: 30rpx;" @tap="hideModal">
						{{closeText}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		login
	} from '@/mixin/login.js'
	import {
		mixinAdvertising
	} from '@/mixin/advertising.js'
	
	import {advertisingData11} from "@/mixin/advertisingData1.js"
	export default {
		mixins: [login,mixinAdvertising,advertisingData11],
		props:{
			title:{	//显示的内容
				type: String,
				default: '为了更好的体验，快去登录授权吧'
			},
			authorize:{	//是否授权登录
				type: Boolean,
				default: true
			},
			btnText:{	//按钮文字
				type: String,
				default: '授权登录'
			},
			closeText:{	//关闭文笔
				type: String,
				default: '暂时不用'
			}
		},
		data(){
			return {
				// Modal
				modalName: "",
				vipConfig:{},
				adUnitIdbanner:""
			}
		},
		mounted() {
			let vipConfig = uni.getStorageSync('vipConfig')
			if(vipConfig){
				this.vipConfig = uni.getStorageSync('vipConfig')
				
			}
			this.adUnitIdbanner = this.advertisingData1(this.advertisingDataType.bannerList)
		},
		methods:{
			showModal(e) {
				this.modalName = e.currentTarget.dataset.target
			},
			hideModal(e) {
				this.modalName = null
			},
		}
	}
</script>

<style scoped>
	button::after{
		border: none;
	}
	.text-gradual {
		font-size: 36rpx;
		color: #fff;
		background-image: -webkit-linear-gradient(left, #ff0, #dd524d 25%, #bdcd34 50%, #dd524d 75%, #ff0);
		-webkit-text-fill-color: transparent;
		-webkit-background-clip: text;
		-webkit-background-size: 200% 100%;
		-webkit-animation: masked-animation 3s infinite linear;
		border: 0;
		font-size: 33rpx;
	
	}
	
	@-webkit-keyframes masked-animation {
		0% {
			background-position: 0 0
		}
	
		to {
			background-position: -100% 0
		}
	}
	
</style>
